// 面包屑导航
crumbFn();
function crumbFn() {
    // console.log(goodData.path);
    // 获取元素
    var crumbsBox = document.querySelector('.crumbs');
    crumbsBox.innerHTML = '';
    // 安装path数据当中length
    var crumbs_arr = goodData.path;
    crumbs_arr.forEach(function (item, index) {
        // console.log(item);
        // console.log(index);
        if (index === crumbs_arr.length - 1) {
            // 最后一个处理
            var span = document.createElement('span');
            span.innerText = item.title;
            crumbsBox.appendChild(span);
        } else {
            var a = document.createElement('a');
            var i = document.createElement('i');
            a.href = item.url;
            a.innerText = item.title;
            i.innerText = '/';
            crumbsBox.appendChild(a);
            crumbsBox.appendChild(i);
        }
    })
}

glassFn()
// 添加放大镜效果
function glassFn() {
    // 1.鼠标移入盒子 显示蒙版
    var simgBox = document.querySelector('.main_top_l_simg_box');
    var mark = document.querySelector('.mark')

    var bigimgbox = document.querySelector('.bigimgbox');
    var bigimg = document.querySelector('.bigimgbox img');

    simgBox.onmouseenter = function () {
        mark.style.display = 'block';
        bigimgbox.style.display = 'block';

        // 添加鼠标移动事件
        simgBox.onmousemove = function (event) {
            // 获取鼠标位置
            var x = event.clientX;
            var y = event.clientY;
            // getBoundingClientRect 获取某个元素的相对于 视口左上角的位置。
            var left = x - this.getBoundingClientRect().left - mark.offsetWidth / 2;
            var top = y - this.getBoundingClientRect().top - mark.offsetHeight / 2;
            // 判断top和left超出范围
            if (left < 0) {
                left = 0;
            }
            if (top < 0) {
                top = 0;
            }
            var maxLeft = this.offsetWidth - mark.offsetWidth;
            var maxTop = this.offsetHeight - mark.offsetHeight;
            if (left > maxLeft) {
                left = maxLeft;
            }
            if (top > maxTop) {
                top = maxTop;
            }
            // 将鼠标位置赋值蒙版的top和left
            mark.style.top = top + 'px';
            mark.style.left = left + 'px';


            // 获取大图移动的距离
            // 比例 = 小图的盒子宽度-mark蒙版的宽度/大图的宽度-大图盒子的宽度
            var scale = maxLeft / (bigimg.offsetWidth - bigimgbox.offsetWidth);
            // console.log(scale);

            // 改变图片的margin
            bigimg.style.marginLeft = -left / scale + 'px';
            bigimg.style.marginTop = -top / scale + 'px';

        }

        simgBox.onmouseleave = function () {
            // console.log("离开了");

            // 蒙版和大图消失
            mark.style.display = 'none';
            bigimgbox.style.display = 'none';

            simgBox.onmousemove = null;
            simgBox.onmouseleave = null;
        }

    }
}

imgListRender()
// 放大镜下方初始化图片列表
function imgListRender() {
    // 数据图片列表
    var imgArr = goodData.imagessrc;

    // 获取ul列表
    var simg_list = document.querySelector('.main_top_simg_list')
    simg_list.innerHTML = '';
    // console.log(imgArr);
    for (var i = 0; i < imgArr.length; i++) {
        var li = document.createElement('li');
        var img = document.createElement('img');
        img.src = imgArr[i].s;
        li.appendChild(img);
        simg_list.appendChild(li);
    }
}

// 轮播切换显示图片列表
imgTab()
function imgTab() {

    // 获取data数据
    var imgArr = goodData.imagessrc;
    // 获取按钮
    var btns = document.querySelectorAll('.main_top_l_b .btn');
    var list = document.querySelector('.main_top_simg_list');
    var lis = document.querySelectorAll('.main_top_simg_list li');
    var sImg = document.querySelector('.main_top_l_simg_box > img')
    var bImg = document.querySelector('.bigimgbox > img')
    // 移动索引
    var index = 0;
    // 一次性 切换几张图 - 单位li的宽度+单位li的右外边距*2;
    var onceL = (lis[0].offsetWidth + 20) * 2;
    btns[0].onclick = function () {
        // console.log("左边的点了");
        index--;
        if (index < 0) {
            // console.log("超出了");
            list.style.marginLeft = 0;
            index = 0;
        } else {
            list.style.marginLeft = - onceL * index + 'px';
        }
    }
    btns[1].onclick = function () {
        index++;
        // 判断移动li 的个数是否超出最大可移动li个数
        if (index * 2 > lis.length - 5) {
            // console.log("超出了");
            list.style.marginLeft = - (lis[0].offsetWidth + 20) * (lis.length - 5) + 'px';
            index--;
        } else {
            list.style.marginLeft = - onceL * index + 'px';
        }
    }

    lis.forEach(function (item, index) {
        item.onclick = function () {
            // console.log("点击了");
            // 切换图片src
            // console.log(imgArr[index].b);
            sImg.src = imgArr[index].s;
            bImg.src = imgArr[index].b;
        }
    })
}

// 渲染右侧内容区域
contRender()
function contRender() {

    var data = goodData.goodsDetail;
    var str = `<h3>
                    ${data.title}
                </h3>
                <p class="sale">${data.recommend}</p>
                <div class="price_box">
                    <p>
                        <em>价&emsp;&emsp;格</em>
                        <span>￥</span>
                        <strong>${data.price}</strong>
                        <i>降价通知</i>
                        <ins>累计评价 ${data.evaluateNum}</ins>
                    </p>
                    <p>
                        <em>促&emsp;&emsp;销</em>
                        <s>
                            <u>${data.promoteSales.type}</u>
                            <b>${data.promoteSales.content}</b>
                        </s>
                    </p>
                </div>
                <div class="support">
                    <em>支&emsp;&emsp;&nbsp;持</em>
                    <p>${data.support}</p>
                </div>
                <div class="address">
                    <em>配&nbsp; 送&nbsp; 至</em>
                    <p>${data.address}</p>
                </div>
                <div class="choose_box">
                </div>
                <div class="configuration">
                    <dl>
                        <dt>选择颜色</dt>
                        <dd>金色</dd>
                        <dd>金色</dd>
                        <dd>金色</dd>
                    </dl>
                    <dl>
                        <dt>选择颜色</dt>
                        <dd>金色</dd>
                        <dd>金色</dd>
                        <dd>金色</dd>
                    </dl>
                    <dl>
                        <dt>选择颜色</dt>
                        <dd>金色</dd>
                        <dd>金色</dd>
                        <dd>金色</dd>
                    </dl>
                    <dl>
                        <dt>选择颜色</dt>
                        <dd>金色</dd>
                        <dd>金色</dd>
                        <dd>金色</dd>
                    </dl>
                </div>
                <div class="shopcar_box">
                    <div class="shopcar_box_l">
                        <input type="text" name="" id="">
                        <a href="#">+</a>
                        <a href="#">-</a>
                    </div>
                    <button class="carbtn">加入购物车</button>
                </div>`;
    var mainTopR = document.querySelector('.main_top_r');
    mainTopR.innerHTML = str;
    // 初始化配置内容
    var configuration = document.querySelector('.configuration');
    configuration.innerHTML= '';
    // 获取dl数据
    var dlArr = data.crumbData;
    var dlStr = '';
    // innerHTML修改添加元素
    dlArr.forEach(function(item,index){
         dlStr += `
            <dl index="${index}">
                <dt>
                    ${item.title}
                </dt>
        `; 
        item.data.forEach(function(ddItem,ddIndex){
            dlStr+=`
                <dd cp="${ddItem.changePrice}">
                    ${ddItem.type}
                </dd>
            `;
        })
        dlStr+='</dl>';
    })
    configuration.innerHTML = dlStr;
}

// 给选择配置dd按钮添加点击事件
var priceArr = [0,0,0,0];
// var arr = [
//     {
//         cp:40,
//         text:'银色'
//     },
//     0,
//     0,
//     0
// ]

ddClick()
function ddClick(){
    // 获取所有dd按钮
    var aDd = document.querySelectorAll('.configuration dd');

    console.log(priceArr);
    aDd.forEach(function(item){
        item.onclick = function(){
            // 获取父级
            var oPar = this.parentNode;
            var aDds = oPar.querySelectorAll('dd');
            aDds.forEach(function(item){
                item.style.color = '#666';
            })
            // 自己的颜色变红
            this.style.color = 'red';

            // 修改数组
            // console.log(oPar.getAttribute('index'));
            var index = oPar.getAttribute('index');
            priceArr[index] = {
                cp:this.getAttribute('cp'),
                text:this.innerText
            }

            console.log(priceArr);

            var chooseBox = document.querySelector('.choose_box');
            chooseBox.innerHTML = '';
            //根据数组里面有几个对象才创建 -  实现创建选择后的配置span标签
            priceArr.forEach(function(item,index){
                if(item){
                    var oSpan = document.createElement('span');
                    var i = document.createElement('i');
                    i.index = index;
                    i.cp = item.cp;
                    i.onclick = function(){
                    //    console.log(this.cp);
                    //    console.log(this.index);
                        // 删除父级元素
                        oSpan.remove();

                        // 数组还原
                        priceArr[this.index] = 0;

                        // 颜色还原
                        var oDl = document.querySelectorAll('.configuration dl');
                        var aDd = oDl[this.index].querySelectorAll('dd');
                        for(var i=0;i<aDd.length;i++){
                            aDd[i].style.color = '#666';
                        }
                        aDd[0].style.color = 'red';

                        changePriceFn();
                        
                    }
                    oSpan.innerHTML = item.text;
                    i.innerHTML = 'X';
                    oSpan.appendChild(i);
                    chooseBox.appendChild(oSpan);
                    
                }
            })


            changePriceFn();

        }
    })
    
}

changePriceFn();
function changePriceFn(){
     // 获取显示价格的盒子
     var priceBox = document.querySelector('.price_box strong');
     // 获取当前数据给你的初始价格
     var price = goodData.goodsDetail.price;

    //  获取选择搭配左侧价格盒子
     var goodsboxPriceBox = document.querySelector('.goodsbox span')

     priceArr.forEach(function(item){
         if(item){
             price+=+item.cp;
         }
     })

     priceBox.innerHTML = price;
     goodsboxPriceBox.innerHTML = '￥'+price;


    //  checkbox选择
    // 获取所有的input的checkbox
    var aCheckBox = document.querySelectorAll('.choosebox_list input');
    var chooseboxRPriceBox = document.querySelectorAll('.choosebox_r p')[2];
    
    aCheckBox.forEach(function(item){
        item.onchange = function(){
            // console.log(123);
            if(this.checked){
                price+=+this.value;
            }else{
                price-=+this.value;
            }
            // console.log(price);
            chooseboxRPriceBox.innerHTML = '￥'+price;
        }

         // 遍历选中的checkbox - 把price加起来
        if(item.checked){
            price+=+item.value;
        }
    })
    chooseboxRPriceBox.innerHTML = '￥'+price;
   
}





// 选项卡实现
leftTabFn()
function leftTabFn(){
    var aBtns = document.querySelectorAll('.btn_list > li');
    var aBoxs = document.querySelectorAll('.box_list > li');

    aBtns.forEach(function(item,index){
        item.onclick = function(){
            item.parentNode.querySelector('.active').classList.remove('active');
            this.className = 'active';
            aBoxs[index].parentNode.querySelector('.show').classList.remove('show');
            aBoxs[index].classList.add('show');    
        }
    })
}
